<template>
	<base-swiper :total="list.length" v-show="list.length">
		<sports-swiper-item v-for="item in list" :key="item.eventId" :data="item" />
	</base-swiper>
</template>

<script lang="ts" setup>
import { watch, computed } from 'vue'
import SportsSwiperItem from './sports-swiper-item.vue'
import { BaseSwiper } from '@/components/base'
import { useAppStore, useMatchStore } from '@/store'
import { getRecommendMatchs } from '@/api/betting'
import { useRequest } from '@/hooks'
import { Match } from '@/types'

const props = defineProps({
	code: {
		type: String
	}
})

const appStore = useAppStore()
const matchStore = useMatchStore()

const { run, list } = useRequest<Match>(getRecommendMatchs, {
	onSuccess: () => {
		matchStore.setList(list.value, 'swiper')
	}
})

const pramas = computed(() => {
	let type = props.code
	if (type === 'fifa') {
		type = 'soccerVirtual'
	} else if (type === 'nba2k') {
		type = 'basketballVirtual'
	}
	return {
		locale: appStore.lang,
		oddsStyle: appStore.odds,
		location: appStore.region,
		type
	}
})

watch(
	pramas,
	(val) => {
		run(val, {
			refresh: true
		})
	},
	{
		immediate: true
	}
)
</script>
